<template>
    <div class="content">
      <van-icon @click="$router.push(`/index/detail/${id}`)" size="30px" name="arrow-down" />
      <div v-for="item in duction" :key="item.id">
        <div>
          <h1 class="h-1"></h1>
        </div>
        <div class="wz-1">
          <h3>课程介绍</h3>
          <span
            >{{item.introduction}}</span
          >
        </div>
        <div>
          <h3>课程建议</h3>
          <span>{{item.method}}</span>
        </div>
        <div>
          <h3>练前准备</h3>
          <span>{{item.suggestion}}</span>
        </div>
        <div>
          <h3>身体反应</h3>
          <span>{{item.body_response}}</span>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import httpApi from "@/http";
  
  export default {
    data() {
      return {
          duction:'',
          id:this.$route.params.id
      };
    },
    mounted() {
      this.courseIntroduction();
    },
  
    methods: {
      courseIntroduction() {
        console.log(this.$route.params.id);
        httpApi.courseApi.courseIntroduction({ project_id: this.id }).then((res) => {
          console.log(res);
          this.duction = res.data.data;
        });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .content {
    margin-left: 35px;
    margin-right: 35px;
    margin-bottom: 30px;
  }
  div {
    margin-top: 30px;
  }
  h3 {
    margin-bottom: 20px;
  }
   span{
      color: #666;
  }
  </style>